<template>
	<view>
		<cu-navbar>
			<block slot="backText"></block>
			<block slot="content">分类</block>
		</cu-navbar>
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation>
				<view class="cu-item" :class="item.id == cate_id ? 'text-mauve cur' : ''" v-for="(item, index) in category" :key="index" @tap="TabSelect" :data-id="item.id">
					{{ item.name }}
				</view>
			</scroll-view>

			<scroll-view class="VerticalMain" scroll-y scroll-with-animation @scrolltolower="lowers" :lower-threshold="50">
				<view class="padding-top padding-lr">
					<view class="cu-list menu-avatar">
						<view class="cu-item cur" v-for="(item, index) in list" :key="index" @click="testDetail(item.id)">
							<view class="cu-avatar radius xl" :style="{ backgroundImage: 'url(' + item.image + ')' }"><!-- <view class="cu-tag badge"></view> --></view>
							<view class="content">
								<view>
									<text class="text-cut" v-text="item.title"></text>
									<!-- <view class="cu-tag round bg-orange sm">6人</view> -->
								</view>
								<view class="text-gray text-sm flex"><text class="text-cut" v-text="item.description"></text></view>
								<view class="flex justify-between">
									<text class="text-lg text-shadow text-mauve">￥{{ item.pay_mode==2?item.price:'免费' }}</text>
									<text class="text-gray text-shadow margin-right-xs">{{ item.test_num }}人已测</text>
								</view>
							</view>
						</view>
						<view class="" v-if="!list.length"><cu-empty></cu-empty></view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { test } from '@/config/mixins.js';
export default {
	mixins: [test],
	data() {
		return {
			CustomBar: this.CustomBar,
			list: [],
			cate_id: 0,
			category: [],
			page: 1,
			is_loading: true
		};
	},
	onLoad() {
		this.getcategory();
	},
	methods: {
		TabSelect(e) {
			this.cate_id = e.currentTarget.dataset.id;
			this.list = [];
			this.page = 1;
			this.is_loading = true;
			this.gettestlist();
		},
		getcategory() {
			this.$api.category().then(res => {
				uni.stopPullDownRefresh();
				if (res.code) {
					this.category = res.data;
					this.cate_id = res.data.length?res.data[0].id:0;
					this.gettestlist();
				}
			});
		},
		gettestlist() {
			this.$api
				.testlist({
					page: this.page,
					category_id: this.cate_id
				})
				.then(res => {
					if (res.code) {
						if (res.data.current_page == res.data.last_page) {
							this.is_loading = false;
						}
						this.list = this.list.concat(res.data.data);
					}
				});
		},
		lowers() {
			if (this.is_loading) {
				this.page++;
				this.gettestlist();
			}
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.category = [];
		this.list = [];
		this.getcategory();
	}
};
</script>

<style>
.VerticalNav.nav {
	width: 200upx;
	white-space: initial;
	height: 100%;
	background-color: #fff;
}

.VerticalNav.nav .cu-item {
	width: 100%;
	text-align: center;
	margin: 0;
	border: none;
	height: 50px;
	position: relative;
}

.VerticalNav.nav .cu-item.cur {
	background-color: #f4f6f8;
}

.VerticalNav.nav .cu-item.cur::after {
	content: '';
	width: 8upx;
	height: 30upx;
	border-radius: 10upx 0 0 10upx;
	position: absolute;
	background-color: currentColor;
	top: 0;
	right: 0upx;
	bottom: 0;
	margin: auto;
}

.VerticalNav .cu-item:last-child,
.cu-list .cu-item:last-child {
	margin-bottom: 10upx;
}

.VerticalBox {
	/* #ifdef  H5 */
	height: calc(100vh - 95px);
	/*  #endif  */
	/* #ifndef  H5 */
	height: calc(100vh - 60px);
	/* #endif */

	display: flex;
	overflow: hidden;
}

.VerticalMain {
	background-color: #f4f6f8;
	flex: 1;
	height: 100%;
}

.cu-list.menu-avatar > .cu-item {
	height: 190upx;
}

.cu-list.menu-avatar > .cu-item .content {
	left: 180upx;
	width: calc(100% - 100px);
}
</style>
